<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>周计划折线图</title>
    <script src="../../res/echarts/echarts.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
</head>
<style>
    .curriculum {
        height: 550px;
        width: 100%;
        margin: 0 auto;
    }

    .search {
        margin: 0 auto;
        height: 120px;
        text-align: center;
        line-height: 80px;
    }

</style>

<body>
<input type="hidden" id="one"/>
<input type="hidden" id="two"/>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form, laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#startTime',
            trigger: 'click',
            type: 'date'
        });

        laydate.render({
            elem: '#endTime',
            trigger: 'click',
            type: 'date'
        });
    });
</script>
<div class="curriculum">
    <div class="search">
        时间:
        <div class="layui-inline">
            <input class="layui-input" name="startTime" id="startTime" placeholder="开始时间" lay-verify="date"
                   autocomplete="off">
        </div>
        -
        <div class="layui-inline">
            <input class="layui-input" name="endTime" id="endTime" placeholder="结束时间" lay-verify="date"
                   autocomplete="off">
        </div>
        <input type="button" lay-event="seachTable" id="seachTable" class="layui-btn layui-btn-normal" value="搜索"/>
    </div>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="float:left;width:80%;height:400px;"></div>
    <div id="main2" style="margin-left:10px;float:left;width:45%;height:400px;"></div>
    <div id="main3" style="margin-left:10px;float:left;width:45%;height:400px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        title: {
            text: '周训练负荷分析'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['运动强度', '运动量', '运动负荷']
        },
        grid: { //统计图比例大小
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['柔道', '拳击', '击剑']
        },
        yAxis: {
            type: 'value'

        },
        series: [{
            name: '运动强度',
            type: 'line',
            data: [100, 200, 300]
        }, {
            name: '运动负荷',
            type: 'line',
            data: [200, 200, 200]
        }, {
            name: '运动量',
            type: 'line',
            data: [300, 200, 100]
        }]
    };


    var myChart2 = echarts.init(document.getElementById('main2'));
    // 使用刚指定的配置项和数据显示图表。
    option2 = {
        title: {
            text: '周计划训练比例',
            x: 'center'
        }, tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        }, legend: {
            orient: 'vertical',
            left: 'right',
            data: ['柔道', '拳击', '击剑']
        },
        series: [{
            name: '计划名称',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{value: 111, name: '柔道'},
                {value: 310, name: '拳击'},
                {value: 234, name: '击剑'}],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    var myChart3 = echarts.init(document.getElementById('main3'));
    // 使用刚指定的配置项和数据显示图表。
    option3 = {
        title : {
            text: '周计划训练量',
            x:'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: ['柔道', '拳击', '击剑']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [100, 200, 300],
            type: 'line'
        }]
    };

    //折线图
    function broken() {
        var name = null;
        var serie = [];
        var leg = [];
        var xz = []
        var url = '../../../atsPlanWeekController/weekEchar';
        $("#one").val($("#startTime").val());
        $("#two").val($("#endTime").val());
        var data = {startTime: $("#startTime").val(), endTime: $("#endTime").val()};
        $.post(url, data, function (obj) {
            //所有
            $.each(obj[0].itemNameAll, function (indexss, itemss) {

                name = itemss.itemName;
                leg.push(name);
                var values = [];
                var x = [];

                $.each(obj, function (index, item) {

                    x.push(item.title);
                    var leg = [];
                    xz = x;
                    $.each(item.itemNameAll, function (indexs, items) {
                        if (indexs == indexss) {
                            values.push(items.itemValue)
                        }
                        var itemName = items.itemName;

                    });

                });

                var item = {
                    name: name,
                    type: 'line',
                    data: values
                };
                serie.push(item);

            });
            var pie = [];
            var pieName = [];
            var line = [];
            $.each(obj, function (index, item) {
                var piex = [];
                var pName = [];
                var lines = [];
                $.each(item.pieChart, function (indexa, itema) {
                    piex.push({value: itema.itemValue, name: itema.weekName});
                    pName.push(itema.weekName);
                    lines.push(itema.itemValue);
                    line = lines;
                    pieName = pName;
                    pie = piex;
                });

            });


            myChart3.setOption({        //加载数据图表
                xAxis: {
                    data: pieName
                }, series: [{
                    data: line
                }]
            });
            myChart2.setOption({        //加载数据图表
                series: [{
                    data: pie
                }], legend: {
                    data: pieName
                }
            });
            myChart.setOption({        //加载数据图表
                legend: {
                    data: leg
                }, xAxis: {
                    data: xz
                }, series: serie
            });


        });
    }

    $(function () {
        $("#seachTable").on("click", function () {
            broken();
            $("#startTime").val($("#one").val());
            $("#endTime").val($("#two").val());
        });


    });
    myChart3.setOption(option3);
    myChart2.setOption(option2);
    myChart.setOption(option);

</script>
</body>
</html>
